<template>
  <div class="photo">
    <img
      class=""
      v-if="!isError && imageInvalid(src)"
      :src="src"
      :style="imgStyle"
      @error="onErrorHandler"
    />
    <img
      v-else
      :style="imgStyle"
      class=" kk"
      src="~@/assets/logo.png"
    />
  </div>
</template>

<script>
/**
 * @property {String} src 图片地址
 * @property {Object} imgStyle 图片样式
 */
export default {
  props: {
    src: {
      type: String,
      default: "",
    },
    imgStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isError: false,
    };
  },
  methods: {
    /**
     * @param {String} str
     */
    imageInvalid(str) {
      let res = str.length ? true : false;
      return res;
    },
    onErrorHandler() {
      this.isError = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@function db($num) {
  @return $num * 2;
}
.imgBox {
  width: 100%;
  height: 0;
  border-radius: 10px;
  overflow:hidden;
  position: relative;
  padding-bottom: 100%;
}
.imageStyle {
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
}
.kk{
    width: 100%;
    height: 100%;
}
</style>